<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item
        title="价格"
        v-model="priceVal"
        :options="priceArr"
        @change="priceChange"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="categoryChange"
      />
    </van-dropdown-menu>
    <product v-if="goodsList.length !== 0" :goodsList="goodsList"></product>
    <van-empty image="search" description="您查找的商品不存在" v-else />
  </div>
</template>
 
<script>
import product from "@/components/product/product.vue";
export default {
  name: "",
  props: ["filterCategory", "goodsList"],
  components: {
    product,
  },
  data() {
    return {
      //判断是否有产品列表
      ifEmpty: true,
      //分类下拉菜单当前项
      categoryVal: null,
      //价格下拉菜单当前项
      priceVal: "",
      priceArr: [
        { text: "价格由低到高", value: "asc" },
        { text: "价格由高到底", value: "desc" },
      ],
    };
  },
  methods: {
    // 点击选项时改变时触发
    // 子传父，把变化的priceVal传给父组件
    priceChange(val) {
      this.$emit("valChange", val);
    },
    categoryChange(val) {
      // console.log(val);
      this.$emit("categoryChange", val);
    },
  },
  mounted() {
    //判断filterCategory里面哪一项的checked为true，为true的那一项的value赋值给categoryVal，即下拉菜单默认选中哪一项
    this.filterCategory.map((val, index) => {
      if (val.checked) {
        this.categoryVal = val.value;
      }
    });
  },
};
</script>
 
<style>
</style>